<template>
    <!-- 一个.vue文件之中, 只能有一个根节点, 所以要放在一个div之中-->
    <div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="id" label="id" width="120">
            </el-table-column>
            <el-table-column prop="name" label="书名" width="180">
            </el-table-column>
            <el-table-column prop="author" label="作者" width="150">
            </el-table-column>
            <el-table-column prop="publish" label="出版社" width="300">
            </el-table-column>
            <el-table-column prop="pages" label="页数" width="100">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="100">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="editBook(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页插件, https://blog.csdn.net/weixin_44869344/article/details/106139931 -->
        <el-pagination background layout="prev, pager, next" :page-size="5" :total="total" @current-change="page">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        name: "BookManage",
        methods: {
            editBook(row) {
                // 跳转传参，参数写在query之中，在页面构建的时候，我们就可以去拿
                this.$router.push({
                    path: '/updatebook',
                    query: {
                        id: row.id
                    }
                });
                // 此处是拿到了数据的
                console.log("row.id: " + row.id)
            },
            deleteBook(row){
                const _this = this
                axios.delete('http://localhost:8991/book/deletebook/' + row.id).then(function (resp) {
                    _this.$alert('《'+row.name+'》删除成功！', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            window.location.reload()
                        }
                    })
                })
            },
            page(currentPage) {
                const _this = this
                let allbooksnum = 0;
                axios.get("http://localhost:8991/book/num").then(function (resp01) {
                    // console.log(resp01.data)
                    allbooksnum = resp01.data
                    _this.total = allbooksnum
                })
                axios.get("http://localhost:8991/book/get/" + currentPage + "/5").then(function (resp02) {
                    // console.log(resp02.data)
                    _this.tableData = resp02.data
                })
            }
        },
        created() {
            const _this = this;
            let allbooksnum = 0;
            axios.get("http://localhost:8991/book/num").then(function (resp01) {
                // console.log(resp01.data)
                allbooksnum = resp01.data;
                _this.total = allbooksnum
            })
            axios.get("http://localhost:8991/book/get/0/5").then(function (resp02) {
                // console.log(resp02.data)
                _this.tableData = resp02.data
            })
        },

        data() {
            return {
                total: null,
                tableData: null
            }
        }
    }
</script>

<style scoped>

</style>
